vuetify

What is vuetify?

Vuetify is a popular Vue.js component framework that provides a wide range of pre-made components and styles to help developers build visually appealing and responsive web applications quickly. It follows the Material Design guidelines and offers a rich set of features including layout systems, form controls, data tables, and more.

What are vuetify's main functionalities?

Layout System

Vuetify's layout system allows you to create responsive layouts using a grid system. The example demonstrates a simple layout with a primary and secondary content area using `v-container`, `v-row`, and `v-col` components.

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8">
        <v-card>
          <v-card-title>Primary Content</v-card-title>
          <v-card-text>This is the main content area.</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card>
          <v-card-title>Secondary Content</v-card-title>
          <v-card-text>This is the secondary content area.</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

Form Controls

Vuetify provides a variety of form controls such as text fields, buttons, and more. The example shows a simple form with two text fields and a submit button, demonstrating how to use `v-text-field` and `v-btn` components.

<template>
  <v-form>
    <v-text-field label="Name" v-model="name"></v-text-field>
    <v-text-field label="Email" v-model="email"></v-text-field>
    <v-btn @click="submitForm">Submit</v-btn>
  </v-form>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    submitForm() {
      // Form submission logic
    }
  }
};
</script>

Data Tables

Vuetify's data tables allow you to display tabular data with ease. The example shows a simple data table with two columns, 'Name' and 'Age', using the `v-data-table` component.

<template>
  <v-data-table :headers="headers" :items="items"></v-data-table>
</template>
<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' }
      ],
      items: [
        { name: 'John Doe', age: 30 },
        { name: 'Jane Smith', age: 25 }
      ]
    };
  }
};
</script>

Other packages similar to vuetify

element-ui

Element UI is a Vue 2.0-based component library for developers, designers, and product managers. It provides a wide range of customizable components and follows a clean design language. Compared to Vuetify, Element UI offers a different set of design principles and components, making it a good alternative for those who prefer a different aesthetic.

buefy

Buefy is a lightweight UI component library based on Bulma, a CSS framework. It provides a set of responsive UI components for Vue.js applications. Buefy is less feature-rich compared to Vuetify but is a good choice for developers looking for a simpler and more lightweight solution.

quasar

Quasar Framework is a Vue.js-based framework that allows you to build high-performance Vue.js user interfaces in record time. It offers a wide range of components and utilities, similar to Vuetify, but also includes features for building mobile and desktop applications using the same codebase.

README

Vuetify for Vue.js

Vuetify.js is a semantic component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify.js uses Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4

Build amazing applications with the power of Vue and Material Design with a massive library of beautifully crafted components. Built for speed, Vuetify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.

Vuetify.js supports all modern browsers, including IE11 and Safari 9+. From mobile to laptop to desktop, you can rest assured that your application will work as expected. Interested in the bleeding edge? Try the vue-cli Webpack SSR (Server side rendered) template and build the ultimate UI.

Vuetify.js is proudly sponsored by:

Looking for Vue.js jobs? Check out vuejobs.com

---

Support Vuetify.js's development with:
Patreon  or  Paypal

Demo and Documentation

Documentation

CDN Quick-start

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <v-app>
      <main>
        <v-container>Hello world</v-container>
      </main>
    </v-app>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>

Project Install

# npm
npm install vuetify

# yarn
yarn add vuetify

Use

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

For including styles, you can either place the below styles in your index.html

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

Or you can import it to your webpack entry point

require('/path/to/node_modules/vuetify/dist/vuetify.min.css')

Keep in mind, you will need to ensure your webpack config contains a css-loader.

Frequently asked questions and Gotchas

Frequently asked questions

Support and Questions

Ask your support questions on the vuetifyjs discord.

Info

Codepen starter Vuetify Template